<template>
  <div class="opt">
    <div class="path"><span class="level-1">订单管理</span> > <span class="level-2">订单列表</span></div>
    <div>
      <div class="title"><span>专属商家注册链接</span></div>
      <div class="con link">
        <span>链接</span>
        <span class="link-info">{{info.inviteUrl}}</span>
        <Button id="foo" type="primary" style="margin-left: 20px" @click="copy">复制</Button>
      </div>
    </div>
    <div>
      <div class="title"><span>客服</span></div>
      <div class="con service">
        <span>微信</span>
        <img :src="qr_code" alt="" style="width: 200px;height: 200px;margin: 0 20px;border: 1px dashed #ddd;">
        <Button type="primary" @click="showUpload">修改</Button>
      </div>
    </div>
    <div>
      <div class="title"><span>基本信息</span></div>
        <Form :label-width="120" class="con info">
          <FormItem label="分站运营商ID：" prop="name">{{info.id}}</FormItem>
          <FormItem label="注册时间：" prop="name">{{info.create_time}}</FormItem>
          <FormItem label="用户名：" prop="name">{{info.username}}</FormItem>
          <FormItem label="佣金比例：" prop="name">{{info.commission_rate}}</FormItem>
          <FormItem label="手机号：" prop="name">{{info.mobile}}</FormItem>
          <FormItem label="分站域名：" prop="name">{{info.domain}}</FormItem>
        </Form>
    </div>
    <Modal v-model="showUploadFlag" :width="500" title="修改微信客服" @on-ok="updateImg" @on-cancel="cancelUpdate">
      <div>
        <p>上传新的客服微信二维码</p>
        <div class="up">
          <Upload
            ref="upload"
            :show-upload-list="false"
            :default-file-list="defaultList"
            :on-success="handleSuccess"
            :format="['jpg','jpeg','png']"
            :max-size="5120"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            multiple
            type="drag"
            action="/branch/avatar/upload">
<!--            <p>文件拖入可以上传</p>-->
            <div style="width: 150px;height:150px;display: flex;flex-direction: column;justify-content: space-around">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <span style="color: #ddd;margin-bottom: 10px;">拖入可以上传</span>
            </div>
          </Upload>
          <span> =></span>
          <div class="img-show">
          <template v-if="img && img.status === 'finished'">
            <img :src="img.url" width="150px" height="150px"/>
          </template>
          <template v-else-if="img">
            <Progress v-if="img.showProgress" :percent="img.percentage" hide-info></Progress>
          </template>
        </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {branchInfo, updateImg} from '@/api/api-list'
import Clipboard from 'clipboard'
export default {
  name: 'operative',
  data () {
    return {
      info: {},
      showUploadFlag: false,
      defaultList: [],
      uploadList: [],
      qr_code: '',
      img: null
    }
  },
  methods: {
    handleFormatError () {
      this.$Message.info('请上传微信二维码图片')
    },
    handleMaxSize () {
      this.$Message.info('不可以上传超过5M图片')
    },
    handleSuccess (res, file) {
      file.url = res.data
      this.$Message.info('上传成功')
    },
    copy () {
      var _this = this
      let clipboard = new Clipboard('#foo', {
        text: function () {
          return _this.info.inviteUrl
        }
      })
      clipboard.on('success', function (e) {
        _this.$Message.info('复制成功')
      })
      clipboard.on('error', function () {
        _this.$Message.info('复制失败，您可以尝试手动复制')
      })
    },
    showUpload () {
      this.showUploadFlag = true
    },
    updateImg () {
      if (this.qr_code) {
        updateImg({qr_code: this.qr_code}).then(() => {
          this.qr_code = this.img.url
          this.$Message.info('更新成功')
          this.img = null
        })
      }
    },
    cancelUpdate () {
      this.img = null
    }
  },
  mounted () {
    this.uploadList = this.$refs.upload.fileList
    branchInfo().then(res => {
      this.info = res.data
      this.qr_code = this.info.qr_code
    })
  },
  watch: {
    uploadList () {
      if (this.uploadList && this.uploadList.length) {
        this.img = this.uploadList[this.uploadList.length - 1]
      }
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/iview.css";
.opt{
  overflow: auto;
  >div{
    background: #fff;
    margin-bottom: 10px;
    padding: 5px 10px 10px;
    font-size: 18px!important;
    border-radius: 4px;
  }
  .title{
    padding: 10px 0;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #ddd;
    span{
      padding: 0 10px;
      border-left: 4px solid #5293fe;
    }
  }
  .path{
    font-size: 15px;
    padding: 10px;
    .level-1{
      border-left: 4px solid #5293fe;
      padding: 2px 10px;
      font-weight: bold;
      font-size: 18px;
    }
    .level-2{
      font-size: 18px;
      padding-left: 10px;
    }
  }
  .con.link{
    display: flex;
    align-items: center;
    padding:20px 15px;
    .link-info{
      margin-left: 20px;
    }
  }
  .con.service{
    display: flex;
    padding:20px 15px;
  }
  .con.info{
    display: flex;
    flex-wrap: wrap;
    padding:20px 15px 20px 15px;
    .ivu-form-item{
      min-width: 30%;
      margin: 0;
    }
  }
}
.up{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
  >span{
    font-size: 20px;
    color: #dcdee2;
  }
  div.img-show{
    width: 150px;
    height: 150px;
    border: 1px dashed #dcdee2;
  }
}
.demo-upload-list{
  display: inline-block;
}
</style>
